<template>
  <div class="like">
    <div class="like_content" style="height:100%;">
      <div class="title">猜你喜欢</div>

      <div class="like_list">
        <van-list v-model="loading" :finished="finished" finished-text="客官，奴家也是有底线的" @load="onLoad">
          <van-row gutter="10">
            <van-col span="12" class="like_list_item" v-for="(list, index) in list" :key="index">
              <div class="like_item" @click="con">
                <img :src="list.imgurl" alt>
                <div class="like_title">{{list.title}}</div>
                <div class="like_info">
                  <span class="price">{{list.price}}</span>
                  <span class="number">{{list.number}}人付款</span>
                </div>
              </div>
            </van-col>
          </van-row>
        </van-list>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      list: [
        {
          imgurl:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560312458719&di=daee6b2f047c856ad58368216afa2d72&imgtype=0&src=http%3A%2F%2Fimg.csc86.com%2Fproduct%2F2014%2F12%2F25%2F201412257627130.jpeg",
          title:
            "超给力的电水壶超给力的电水壶超给力的电水力的电水壶的电水壶的电水壶的电水壶的电水壶",
          price: "￥111",
          number: "10"
        },
        {
          imgurl:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560315997810&di=b88fb9012be813fe59d567163fe3d2d1&imgtype=0&src=http%3A%2F%2Fimg001.hc360.cn%2Fg2%2FM00%2F03%2FEB%2FwKhQuVIJ1QuENGMXAAAAAKbuQTU729.jpg",
          title: "这暖壶质量杠杠的",
          price: "￥123",
          number: "20"
        },
        {
          imgurl:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560316208689&di=3c5bbbba5903cfbffd3d2c1ef76b0521&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201802%2F09%2F20180209120153_human.jpg",
          title: "小娘子乱入一下",
          price: "￥123",
          number: "20"
        },
        {
          imgurl:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560910806&di=aba8eeff457fc5860112df4739ff95aa&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.alicdn.com%2Ftfscom%2Fi1%2F2775671785%2FTB2udSum7fb_uJjSsrbXXb6bVXa_%21%212775671785.jpg",
          title: "这衣服是真的的好看啊的的好看啊的的好看啊",
          price: "￥123",
          number: "20"
        },
        {
          imgurl:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560315997810&di=b88fb9012be813fe59d567163fe3d2d1&imgtype=0&src=http%3A%2F%2Fimg001.hc360.cn%2Fg2%2FM00%2F03%2FEB%2FwKhQuVIJ1QuENGMXAAAAAKbuQTU729.jpg",
          title: "这暖壶质量杠杠的",
          price: "￥123",
          number: "20"
        },
        {
          imgurl:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560316663052&di=32363cc2b6df8b175bc59ea4ec4cedbf&imgtype=0&src=http%3A%2F%2Fimg.moejam.com%2Fupload%2Farticle%2F20160205%2Ffaf159441063d0aaf25c730a2c04834a.jpg",
          title: "手办质量杠杠的哇哈哈哈",
          price: "￥123",
          number: "20"
        }
      ],
      loading: false,
      finished: false
    };
  },

  methods: {
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 5; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 20) {
          this.finished = true;
        }
      }, 500);
    },
    con() {
      console.log("到时候调路由");
    }
  }
};
</script>

<style>
.like {
  padding: 10px;
  position: relative;
  margin-top: 10px;
  margin-bottom: 30px;
}
.like_content .title {
  font-size: 17px;
  padding: 5px 0px;
  text-align: center;
  font-weight: 700;
}
.like_list .like_item {
  margin-top: 10px;
  border-radius: 10px;
  background: white;
}
.like_list .like_item img {
  height: 160px;
  width: 100%;
  border-radius: 10px;
}
.like_list .like_item .like_title {
  width: 95%;
  padding: 0 3%;
  margin: 4px auto;
  font-size: 12px;
  line-height: 20px;
  height: 40px;
  overflow: hidden;
  color: #333;
  /* white-space: nowrap; */
  text-overflow: ellipsis;
  /* min-width: 150px; */
}
.like_info {
  font-size: 12px;
  padding: 0px 5px 5px 5px;
  /* padding-top:5px;  */
}
.like_info .number {
  float: right;
}
</style>
